<template>
  <view class="storage-page">
    <view class="page-header">
      <text class="header-title">数据存储与日志演示</text>
      <text class="header-desc">本地缓存操作与控制台日志输出示例</text>
    </view>

    <!-- 功能区块：缓存操作 -->
    <view class="function-section">
      <text class="section-title">缓存操作</text>
      <view class="button-group">
        <button class="operation-btn storage-set" @click="callSetStorage">
          <text class="btn-icon">💾</text>
          <text class="btn-text">setStorage</text>
        </button>
        <button class="operation-btn storage-get" @click="callGetStorage">
          <text class="btn-icon">🔍</text>
          <text class="btn-text">获取缓存</text>
        </button>
      </view>
    </view>

    <!-- 功能区块：日志打印 -->
    <view class="function-section">
      <text class="section-title">日志打印</text>
      <view class="button-group">
        <button class="operation-btn log-info" @click="handleInfo">
          <text class="btn-icon">ℹ️</text>
          <text class="btn-text">console.info</text>
        </button>
        <button class="operation-btn log-warn" @click="handleWarn">
          <text class="btn-icon">⚠️</text>
          <text class="btn-text">console.warn</text>
        </button>
        <button class="operation-btn log-error" @click="handleError">
          <text class="btn-icon">❌</text>
          <text class="btn-text">console.error</text>
        </button>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="hint-card">
      <text class="hint-text">请打开控制台查看操作结果和日志输出</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    /**
     * 设置本地缓存（key: userName, data: chenyuanzhu）
     */
    callSetStorage() {
      console.log("触发设置缓存：userName = chenyuanzhu");
      uni.setStorage({
        key: "userName",
        data: "chenyuanzhu",
        success() {
          console.log("存储userName 成功回调");
        },
        fail() {
          console.error("存储userName 失败");
        }
      });
    },

    /**
     * 获取本地缓存（根据key: userName）
     */
    callGetStorage() {
      uni.getStorage({
        key: "userName", // 与设置缓存的key保持一致
        success: (result) => {
          console.log("获取本地缓存成功，数据：", result.data);
        },
        fail: (result) => {
          console.error("获取本地缓存失败：", JSON.stringify(result));
          console.error("获取本地缓存失败原因：", result.errMsg || "未知错误");
        }
      });
    },

    // 信息级别日志
    handleInfo() {
      console.info("【Info】普通信息日志");
    },

    // 警告级别日志
    handleWarn() {
      console.warn("【Warn】警告类日志");
    },

    // 错误级别日志
    handleError() {
      console.error("【Error】错误类日志");
    }
  }
};
</script>

<style scoped>
.storage-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 30rpx;
  box-sizing: border-box;
}

/* 页面头部 */
.page-header {
  text-align: center;
  padding: 40rpx 0 50rpx;
}

.header-title {
  font-size: 38rpx;
  font-weight: 600;
  color: #1a365d;
  display: block;
  margin-bottom: 15rpx;
}

.header-desc {
  font-size: 26rpx;
  color: #64748b;
}

/* 功能区块样式 */
.function-section {
  background-color: #ffffff;
  border-radius: 18rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1a365d;
  display: block;
  margin-bottom: 25rpx;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1rpx;
  width: 40rpx;
  height: 4rpx;
  background-color: #3182ce;
  border-radius: 2rpx;
}

/* 按钮组布局 */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

/* 按钮基础样式 */
.operation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 220rpx;
  height: 90rpx;
  border: none;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
  transition: all 0.25s ease;
  box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.1);
}

.operation-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.15);
}

.btn-icon {
  margin-right: 10rpx;
  font-size: 32rpx;
}

/* 按钮配色方案 */
.storage-set {
  background-color: #3182ce;
}

.storage-get {
  background-color: #38b2ac;
}

.log-info {
  background-color: #4299e1;
}

.log-warn {
  background-color: #ed8936;
}

.log-error {
  background-color: #e53e3e;
}

/* 提示卡片 */
.hint-card {
  background-color: #ebf8ff;
  border-left: 5rpx solid #3182ce;
  border-radius: 10rpx;
  padding: 25rpx;
  margin-top: 20rpx;
}

.hint-text {
  font-size: 26rpx;
  color: #2c5282;
  line-height: 1.6;
}
</style>